Syntax and Structure (1/10)
    Role of .svelte Files

    In Svelte, components are written inside `.svelte` files. Each file represents a single component and contains everything it needs: HTML for structure, JavaScript for logic, and CSS for styling.

    Key Roles of a .svelte File
    • Encapsulation – keeps markup, logic, and styles together in one file.
    • Automatic scoping – CSS defined in a `.svelte` file is scoped to that component only.
    • Reactivity – variables and reactive statements inside `<script>` automatically update the UI.
    • Compilation – the `.svelte` file is compiled into optimized JavaScript, HTML, and CSS at build time.
    Example: A Simple .svelte Component

    Here, the `.svelte` file defines a component with logic (`name` variable), styles (scoped `h1`), and markup (`<h1>`). When compiled, it becomes efficient JavaScript, HTML, and CSS that run directly in the browser.